<template>
  <div class="edu-page-warp stu-subject-info">
    <el-card shadow="never">
      <el-form :model="subjectForm" ref="subjectForm" label-width="170px" label-position="right" label-suffix="：" :disabled="true">
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('graduationDesign.subjectName')" prop="projectName">
              <el-input v-model="subjectForm.projectName" maxlength="60" class="topic-input-select" :placeholder="$t('graduationDesign.pleaseEnter')"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('graduationDesign.subtitle')" prop="subtitleName">
              <el-input v-model="subjectForm.subtitleName" maxlength="60" class="topic-input-select" :placeholder="$t('graduationDesign.pleaseEnter')"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('graduationDesign.subjectSource')" prop="projectSourceId">
              <el-select v-model="subjectForm.projectSourceId" clearable filterable :placeholder="$t('graduationDesign.pleaseChoose')" class="topic-input-select">
                <el-option v-for="item in source.subjectSourceOptions" :key="item.value" :value="item.value" :label="item.label"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('graduationDesign.subjectNature')" prop="projectNatureId">
              <el-select v-model="subjectForm.projectNatureId" clearable filterable :placeholder="$t('graduationDesign.pleaseChoose')" class="topic-input-select">
                <el-option v-for="item in source.subjectNatureOptions" :key="item.value" :value="item.value" :label="item.label"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('graduationDesign.subjectType')" prop="projectType">
              <el-select v-model="subjectForm.projectType" clearable filterable :placeholder="$t('graduationDesign.pleaseChoose')" class="topic-input-select">
                <el-option v-for="item in source.subjectTypeOptions" :key="item.value" :value="item.value" :label="item.label"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('graduationDesign.graduationDesignLocation')" prop="designPlace">
              <el-input v-model="subjectForm.designPlace" :placeholder="$t('graduationDesign.pleaseEnter')" maxlength="60" class="topic-input-select"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('graduationDesign.socialPractice')" prop="practiceSocialId">
              <el-select v-model="subjectForm.practiceSocialId" clearable filterable :placeholder="$t('graduationDesign.pleaseChoose')" class="topic-input-select">
                <el-option v-for="item in source.socialPracticeOptions" :key="item.value" :value="item.value" :label="item.label"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item :label="$t('graduationDesign.researchDirection')" prop="researchDirection">
              <el-input v-model="subjectForm.researchDirection" type="textarea" :rows="4" maxlength="200" show-word-limit :placeholder="$t('graduationDesign.pleaseEnter')" class="topic-input-select"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item :label="$t('graduationDesign.subjectIntroduction')" prop="introductionProject">
              <el-input v-model="subjectForm.introductionProject" type="textarea" :rows="4" maxlength="200" show-word-limit :placeholder="$t('graduationDesign.pleaseEnter')" class="topic-input-select"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('graduationDesign.instructor')" prop="teacherNum">
              <el-select v-model="subjectForm.teacherNum" clearable filterable :placeholder="$t('graduationDesign.pleaseChoose')" class="topic-input-select">
                <el-option v-for="item in source.tutorOptions" :key="item.value" :value="item.value" :label="item.label"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import API from "common/src/api/underGraduationDesign/stuDeclareSubject";

export default {
  name: 'stuSubjectInfo',
  props: {
    subjectForm: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      api: API,
      source: {
        subjectSourceOptions: [], // 课题来源
        subjectNatureOptions: [], // 课题性质
        subjectTypeOptions: [{ // 课题类别
          label: "毕业论文",
          value: "毕业论文",
        }, {
          label: "毕业设计",
          value: "毕业设计",
        }],
        socialPracticeOptions: [], //其中社会时间情况
        tutorOptions: [],
      },
    };
  },
  created() {
    this.getTutorInfo();
    this.getSubjectSource();
    this.getSubjectNature();
    this.getSocialPractice();
  },
  mounted() { },
  methods: {
    // 查校内老师
    getTutorInfo() {
      const params = {
        pageNum_: 0,
        pageSize_: 1000
      };
      this.api.getInnerTutor(params).then(res => {
        this.source.tutorOptions = this.optionFormat(res.data, "name", "code");
      }).catch();
    },
    // 查课题来源
    getSubjectSource() {
      const params = {
        year: this.subjectForm.grade
      };
      this.api.getSource(params).then(res => {
        this.source.subjectSourceOptions = this.optionFormat(res.data, "subjectSource", "id");
      }).catch();
    },
    // 查课题性质
    getSubjectNature() {
      const params = {
        year: this.subjectForm.grade
      };
      this.api.getNature(params).then(res => {
        this.source.subjectNatureOptions = this.optionFormat(res.data, "subjectProperties", "id");
      }).catch();
    },
    // 查社会实践
    getSocialPractice() {
      const params = {
        year: this.subjectForm.grade
      };
      this.api.getPractice(params).then(res => {
        this.source.socialPracticeOptions = this.optionFormat(res.data, "sociaPractice", "id");
      }).catch();
    },
    // 下拉框选项数据 格式化
    optionFormat(optionList = [], label = "", value = "") {
      const dataset = [];
      for (let i = 0; i < optionList.length; i++) {
        const optionObj = {
          label: optionList[i][label],
          value: optionList[i][value]
        };
        dataset.push(optionObj);
      }
      return dataset;
    }
  }
}
</script>
<style lang="scss" scoped>
.stu-subject-info {
    .topic-input-select {
        width: 100%;
    }
}
</style>
